<template>
<div id="scrollList">
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">订单列表</h2>
  </header>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="page">
    <div class="displayflex top-bar-w">
      <div class="top-bar-c flex1">
        <i class="iconfont icon-sech"></i> 
        <div class="ipt"><input type="text" placeholder="输入订单号" v-model="bbillno"></div>
      </div> 
      <div class="btn-sech" @click="resetGet()">搜索</div>
    </div>
    <scroller lock-x height="-52" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="todolist.length>0">
    <div>
      <div class="list-warp" v-for="item in todolist">
        <div class="list-ctx" @click="goDetail(item.BBillGuid)">
          <div class="head cf ft14">
            <p class="lft f-l">
              {{item.BBillNo}}
            </p>
            <span class="tag f-l" v-if="$route.query.type=='5'">异常</span>
            <span class="tag notValid f-l" v-if="$route.query.type=='5' && (item.InsuraceState == '' || item.InsuraceState == null)">保单未生效</span>
            <span class="tag claim f-l" v-if="$route.query.type=='5' && item.ClaimState != '' && item.ClaimState != null">{{item.ClaimState | claimState}}</span>
            <span class="f-r txt-rit">{{item.State | orderState}}</span>
          </div>
          <div class="grab-wrap">
            <div class="addr ft17"><span class="dotted"></span>{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</div>
            <div class="addr ft17"><span class="dotted org"></span>{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</div>
            <div class="statis ft14 displayflex">
              <span>{{item.OrdersWeight | weight}}，{{item.OrdersVolumn | volumn}}，共{{item.OrdersPKGS}}件</span>
              <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">{{item.CarrierAmount | DriverFee}}</span></div>
            </div>
            <div class="ft14" v-if="item.State =='82'">异常原因：<span class="org">{{item.ExcpetionReason}}</span></div>
             <div class="ft14" v-if="item.State =='81'">实际取货时间：<span class="org">{{item.ConsignTime | timeshort}}</span></div>
              <div class="ft14" v-if="item.State =='81'">实际到达时间：<span class="org">{{item.ArrivalDate | timeshort}}</span></div>
               <div class="ft14" v-if="item.State =='81'">实际签收时间：<span class="org">{{item.ReceiveTime | timeshort}}</span></div>
            <div class="ft14" v-if="item.State =='51'">最晚提货时间：<span class="org">{{item.CollectionTime | timeshort}}</span></div>
            <div class="ft14" v-if="item.State =='51' || item.State =='52' || item.State =='56'">要求到达时间：<span class="org">{{item.LastArrivalArrivedDate | timeshort}}</span></div>
            <div class="ft14" v-if="item.State =='51'">距离最晚提货时间仅剩：<span class="org">{{item.CollectionTime | DateTransformation}}</span></div>
            <div class="ft14" v-if="item.State =='52' || item.State =='56'">距离截至时间仅剩：<span class="red">{{item.LastArrivalArrivedDate | DateTransformation}}</span></div>
          </div>
          <div class="icon-tag" v-if="item.BBillType == 'B05'"><img src="~images/icon/emergent.png"></div>
        </div>
        <div class="list-btn">
          <div class="btn btn-sm" v-if="item.State=='81' || item.State=='82'"  @click="goDetail(item.BBillGuid)">订单详情</div>
          <div class="btn btn-sm" v-if="item.State=='44'" @click="goDriver(item.BBillGuid,item.BBillNo)">重新派单</div>
          <div class="btn btn-sm" v-if="item.State=='52' || item.State=='56'" @click="btnAm(item.BBillGuid)">标记异常</div>
          <div class="btn btn-sm" v-if="item.State=='52'" @click="map(item.BBillGuid)">查看定位</div>
          <a :href='"tel:"+item.DriverTel' class="btn btn-sm" v-if="item.State=='51' || item.State=='52' || item.State=='56'" >联系送货员</a>
          <a :href='"tel:"+item.PickContactsTel' class="btn btn-sm" v-if="item.State=='56'">联系发货人</a>
          <a :href='"tel:"+item.SendContactsTel' class="btn btn-sm" v-if="item.State=='56'">联系收货人</a>

          <div class="btn btn-sm" v-if="type == '5' && item.InsuraceState != '2'" @click="goToClaim(item.BBillGuid)">申请理赔</div>
          <!--<div class="btn btn-sm" v-if="type == '5' && item.InsuraceState == '2'" @click="goToClaim(item.BBillGuid)">理赔进度</div>-->
        </div>
      </div>
      <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
    </div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      未找到相关数据
    </div>
  </div>
  <!-- 异常弹框start -->
  <confirm v-model="show5"
      show-input
      :title="'异常原因'"
      @on-confirm="onConfirm5">
  </confirm>
  <!-- 异常弹框end -->
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      totalLength:0,
      showLoad: false,
      bbillno: '',
      show5: false,
      Memo:'',
      guid:'',
      count:0,
      pageindex:1
    };
  },
  created() {
    this.getData();
    sessionStorage.clear();
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
    type(){
      var val = this.$route.query.type;
      return val.toString();
    },
  },
  created() {
    this.getData();
    sessionStorage.clear();
    this.getTit();
  },
  watch:{
    bbillno(val){
      if(!val){
        this.resetGet();
      }
    }
  },
  methods: {
    getTit(){
      var title = '';
      switch (this.type){
        case '1':
          title = '超时未接单';
          break;
        case '2':
          title = '待提货';
          break;
        case '3':
          title = '在途';
          break;
        case '4':
          title = '待签收';
          break;
        case '5':
          title = '异常订单';
          break;
        case '6':
          title = '已签收';
          break;
      };
      document.title = title; 
    },
    btnAm(guid){
      this.guid=guid;
      this.show5=true;
    },
    goBack() {
      this.$router.go(-1);
    },
    goDetail(billGuid) {
      this.$router.push({
        path: "/orderDetail",
        query: { id: billGuid }
      });
    },
    map(guid) {
      this.$router.push({
        path: "/map",
        query:{id:guid}
      });
    },
    onConfirm5(value) {
      this.Abnormal(this.guid,value);
      // this.$vux.toast.text("异常原因：" + value+'---'+this.guid);
    },
    goDriver(BBillGuid,BBillNo) {
      this.$router.push({
        path: "/driverList",
         query: {
          BBillGuid: BBillGuid,
          BBillNo: BBillNo
        }
      });
    },
    Abnormal(Guid,Memo) {
      var self =this;
      self.showLoad=true;
      var query = {
        Guid: Guid,
        LoginedStaffID: self.userinfo.StaffID,
        LoginedName: self.userinfo.Name,
        Memo: Memo,
        State:'82',
        RowNo:1
      };
      this.Ajax.post("ReceivingConfirm", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: "操作完成",
            onShow() {
             self.resetGet();
            }
          });
        }
      });
    },
    resetGet(){
      this.todolist = [];
      this.count=0;
      this.pageindex=1;
      this.getData();
    },
    onScrollBottom () {
      this.count++;
      if(this.count==1){
        this.getData();
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      };
    },
    getData() {
      var self = this;
      this.showLoad = true;
      var type = this.$route.query.type;
      var query = { 
        BBillNo: this.bbillno,
        PageIndex:this.pageindex,
        PageSize:8
      };
      if (type == 6) {
        query.State = "81";
      }
      if (type == 5) {
        query.State = "82";
      }
      if (type == 1) {
        query.State = "44";
      }
      if (type == 2) {
        query.State = "51";
      }
      if (type == 3) {
        query.State = "52";
      }
      if (type == 4) {
        query.State = "56";
      }
      this.Ajax.post("SearchOrderList", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          if(result.length > 0){
            self.todolist=self.todolist.concat(result);
            self.pageindex++;
            self.count = 0;
          };
          self.totalLength = resp.TotalRecords;
        }
      });
    },
    goToClaim(BBillGuid){
      this.$router.push({
        path: "/claim",
        query:{id:BBillGuid}
      });
    }
  }
};
</script>